<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置整体位置 */
        .main_all {
            width: 50%;
            height: 400px;
            background-color: blanchedalmond;
            position: absolute;
            left: 400px;
            top: 100px;
        }

        /* 设置每一个分位置 */
        .main_all>form>div {
            margin-left: 50px;
            margin-top: 20px;
        }

        .main_all input {
            margin: 0px 50px;
        }

        /* 正确错误返回颜色 */
        .false {
            color: red;
        }

        .true {
            color: green;
        }

        /* 引入颜色 */
        .focused {
            background: #abcdef;
        }
    </style>

    <script>
        // 表单提交总验证
        function up_form() {
            var up_name1 = up_name();
            var up_phone1 = up_phone();
            var up_mima1 = up_mima();
            var up_mima21 = up_mima2();
            var up_address1 = up_address();
            var up_email1 = up_email();
            var up_you_id1 = up_you_id();
            return up_name1 && up_phone1 && up_mima1 && up_mima21 && up_address1 && up_email1 && up_you_id1;

        }

        // 验证用户名
        function up_name() {
            var name = document.getElementById("name");
            var care_name = document.getElementById("care_name");
            var pattern = /^\w{6,12}$/;

            if (!pattern.test(name.value)) {
                care_name.innerHTML = "输入有误！！！";
                care_name.className = "false";
                return false;
            }
            else {
                care_name.innerHTML = "正确";
                care_name.className = "true";
                return true;

            }

        }

        // 验证手机号
        function up_phone() {
            var phone = document.getElementById("phone");
            var care_phone = document.getElementById("care_phone");
            var pattern = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;

            if (!pattern.test(phone.value)) {
                care_phone.innerHTML = "输入有误！！！";
                care_phone.className = "false";
                return false;
            }
            else {
                care_phone.innerHTML = "正确";
                care_phone.className = "true";
                return true;

            }

        }
        // 验证密码
        function up_mima() {
            var mima = document.getElementById("mima");
            var care_mima = document.getElementById("care_mima");
            var pattern = /^\w{6,12}$/;

            if (!pattern.test(mima.value)) {
                care_mima.innerHTML = "输入有误！！！";
                care_mima.className = "false";
                return false;
            }
            else {
                care_mima.innerHTML = "正确";
                care_mima.className = "true";
                return true;

            }
        }
        //确认密码
        function up_mima2() {
            var mima = document.getElementById("mima");
            var mima2 = document.getElementById("mima2");
            var mima_panduan = up_mima();
            var care_mima2 = document.getElementById("care_mima2");
            var pattern = /^\w{6,12}$/;

            if (mima.value != mima2.value) {
                care_mima2.innerHTML = "输入有误！！！";
                care_mima2.className = "false";
                return false;
            }
            if (mima2.value.length == 0) {
                care_mima2.innerHTML = "输入有误！！！";
                care_mima2.className = "false";
                return false;
            }
            if (mima_panduan == false) {
                care_mima2.innerHTML = "输入有误！！！";
                care_mima2.className = "false";
                return false;
            }
            else {
                care_mima2.innerHTML = "正确";
                care_mima2.className = "true";
                return true;


            }
        }
        //验证住址
        function up_address() {
            var address = document.getElementById("address");
            var care_address = document.getElementById("care_address");


            if (address.value.length == 0) {
                care_address.innerHTML = "输入有误！！！";
                care_address.className = "false";
                return false;
            }
            else {
                care_address.innerHTML = "正确";
                care_address.className = "true";
                return true;

            }
        }
        //验证邮箱
        function up_email() {
            var email = document.getElementById("email");
            var care_email = document.getElementById("care_email");
            var pattern = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

            if (!pattern.test(email.value)) {
                care_email.innerHTML = "输入有误！！！";
                care_email.className = "false";
                return false;
            }
            else {
                care_email.innerHTML = "正确";
                care_email.className = "true";
                return true;

            }
        }
        //验证身份证号
        function up_you_id() {
            var you_id = document.getElementById("you_id");
            var care_you_id = document.getElementById("care_you_id");
            var pattern = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

            if (!pattern.test(you_id.value)) {
                care_you_id.innerHTML = "输入有误！！！";
                care_you_id.className = "false";
                return false;
            }
            else {
                care_you_id.innerHTML = "正确";
                care_you_id.className = "true";
                return true;

            }
        }


    </script>
</head>

<body>
    <div class="main_all">

        <div class="zhuce">
            注册界面
        </div>
        <!-- 主题表单 -->
        <form action="#" onsubmit="return up_form()">
            <!-- 用户名 -->
            <div class="b1" id="f1">
                <span class="lable">用户名 </span>&nbsp;&nbsp;
                <input type="text" id="name" onblur="up_name()">
                <span class="careful" id="care_name">请输入6-12位用户名</span>

            </div>
            <!-- 手机号 -->
            <div class="b2" id="f2">
                <span class="lable">手机号</span>&nbsp;&nbsp;
                <input type="text" id="phone" onblur="up_phone()">
                <span class="careful" id="care_phone">请输入中国大陆手机号</span>
            </div>
            <!-- 密码 -->
            <div class="b3" id="f3">
                <span class="lable">密码</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="password" id="mima" onblur="up_mima()">
                <span class="careful" id="care_mima">请输入6-12位密码</span>
            </div>
            <!-- 确认密码 -->
            <div class="b4" id="f4">
                <span class="lable">确认密码</span>
                <input type="password" id="mima2" onblur="up_mima2()">
                <span class="careful" id="care_mima2">请再次输入密码</span>
            </div>
            <!-- 家庭住址 -->
            <div class="b5" id="f5">
                <span class="lable">家庭住址</span>
                <input type="text" id="address" onblur="up_address()">
                <span class="careful" id="care_address">请输入精确住址</span>
            </div>
            <!-- 邮箱 -->
            <div class="b6" id="f6">
                <span class="lable">邮箱 </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="email" onblur="up_email()">
                <span class="careful" id="care_email">请输入标准格式邮箱以@结尾</span>
            </div>
            <!-- 身份证号 -->
            <div class="b7" id="f7">
                <span class="lable">身份证号</span>
                <input type="text" id="you_id" onblur="up_you_id()">
                <span class="careful" id="care_you_id">请输入标准18位身份证号码</span>
            </div>
            <!-- 确定按钮 -->
            <div class="b8">
                <span class="lable">确定按钮</span>
                <button type="submit">确认</button>
                <span class="careful"></span>
            </div>

            <!-- 引入 -->
            <script src="https://code.jquery.com/jquery-latest.js"></script>
            <script>
                $("#f1").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
                $("#f2").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
                $("#f3").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
                $("#f4").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
                $("#f5").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
                $("#f6").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
                $("#f7").delegate("*", "focus blur", function (event) {
                    var elem = $(this);
                    setTimeout(function () {
                        elem.toggleClass("focused", elem.is(":focus"));
                    }, 0);
                });
            </script>





        </form>




    </div>




</body>

</html>